<template>
  <div v-loading="loading">
    <div style="margin-left: 80px;margin-top: 40px;font-size: 28px;font-family: italic, Georgia, serif;">{{nowTitle}}</div>
    <div id="main" style="width: 1300px;height:550px;"></div>
    <div style="display: flex;">
      <el-button type="primary" style="width:100px;margin-left: 100px;margin-right: 20px" @click="getDaily">Daily</el-button>
      <el-button type="primary" style="width:100px;margin-right: 20px" @click="getWeekly">Weekly</el-button>
      <el-button type="primary" style="width:100px" @click="getMonthly">Monthly</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { daily, monthly, weekly } from '@/api/chart'

export default {
  name: 'NewsCount',
  data() {
    return {
      nowTitle:'Daily',
      loading:false,
      option: {
        xAxis: {
          data: [] // 横坐标
        },
        yAxis: {},
        series: [
          {
            data: [], // 纵坐标
            type: 'line',
            label: {
              show: true,
              position: 'bottom',
              textStyle: {
                fontSize: 20
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById('main'))
      myChart.setOption(this.option)
    },
    getDaily() {
      this.loading=true
      daily().then((res) => {
        if (res.result === 'success') {
          this.processDailyData(res)
          this.init()
          this.nowTitle='Daily'
          this.loading=false
        } else {
          this.$message.error('服务器响应错误')
          this.loading=false
        }
      })
    },
    getWeekly(){
      this.loading=true
      weekly().then((res) => {
        if (res.result === 'success') {
          this.processWeeklyData(res)
          this.init()
          this.nowTitle='Weekly'
          this.loading=false
        } else {
          this.$message.error('服务器响应错误')
          this.loading=false
        }
      })
    },
    getMonthly(){
      this.loading=true
      monthly().then((res) => {
        if (res.result === 'success') {
          this.processMonthlyData(res)
          this.init()
          this.nowTitle='Monthly'
          this.loading=false
        } else {
          this.$message.error('服务器响应错误')
          this.loading=false
        }
      })
    },
    processDailyData(responseData) {
      // 清空之前的数据
      this.option.xAxis.data = []
      this.option.series[0].data = []

      // 遍历后端返回的数据
      for (let i = 0; i < responseData.data.length; i++) {
        this.option.xAxis.data.push(responseData.data[i].date)
        this.option.series[0].data.push(parseInt(responseData.data[i].count))
      }
    },
    processWeeklyData(responseData) {
      // 清空之前的数据
      this.option.xAxis.data = []
      this.option.series[0].data = []

      // 遍历后端返回的数据
      for (let i = 0; i < responseData.data.length; i++) {
        this.option.xAxis.data.push(responseData.data[i].iso_year+'-'+responseData.data[i].iso_week)
        this.option.series[0].data.push(parseInt(responseData.data[i].count))
      }
    },
    processMonthlyData(responseData) {
      // 清空之前的数据
      this.option.xAxis.data = []
      this.option.series[0].data = []

      // 遍历后端返回的数据
      for (let i = 0; i < responseData.data.length; i++) {
        this.option.xAxis.data.push(responseData.data[i].iso_year+'-'+responseData.data[i].iso_month)
        this.option.series[0].data.push(parseInt(responseData.data[i].count))
      }
    },
  },
  mounted() {
    this.getDaily()
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
